import { Space, Switch, Table, Popover } from 'antd';
import React, { useState } from 'react';

const App = () => {
  const [hoveredCell, setHoveredCell] = useState(null);

  const handleCellHover = (record, dataIndex) => {
    setHoveredCell({ record, dataIndex });
  };

  const getcontent = (record, dataIndex) => {
    var obj;
    if (record && record.popData && record.popData.length > 0) {
      obj = record.popData?.find(item => {
        return item.key == dataIndex;
      });
    }
    return (
      <div style={{ width: 150 }}>
        <div>去年：{obj?.name}</div>
        <div>预计：{obj?.power1}</div>
        <div>电厂：{obj?.power1}</div>
      </div>
    );
  };

  const renderCellContent = (text, record, dataIndex) => {
    let isHovered =
      hoveredCell &&
      hoveredCell.record.key === record.key &&
      hoveredCell.dataIndex === dataIndex
        ? true
        : false;

    return (
      <Popover
        content={getcontent(record, dataIndex)}
        visible={isHovered}
        trigger="hover"
        placement="bottom"
        overlayStyle={{ maxWidth: '200px' }}
      >
        <span onMouseEnter={() => handleCellHover(record, dataIndex)}>
          {text}
        </span>
      </Popover>
    );
  };

  const columns1 = [
    {
      title: '项目名称',
      dataIndex: 'name',
      key: 'name',
      linkKey: 'name', //跳转必要参数或路径
      isFatherTitle: true,
    },
    {
      title: '电厂1',
      dataIndex: 'power1',
      key: 'power1',
      linkKey: 'power1', //跳转必要参数或路径
    },
    {
      title: '电厂2',
      dataIndex: 'power2',
      key: 'power2',
      linkKey: 'power2', //跳转必要参数或路径
    },
    {
      title: '电厂3',
      dataIndex: 'power3',
      key: 'power3',
      linkKey: 'power3', //跳转必要参数或路径
    },
  ];

  const getColumns = () => {
    let arr = columns1.map(item => {
      return {
        title: !item.isFatherTitle ? (
          <a
            onClick={() => {
              window.open(`www.baidu.com/${item.linkKey}`);
            }}
          >
            {item.title}
          </a>
        ) : (
          item.title
        ),
        dataIndex: item.dataIndex,
        key: item.key,
        render: (text, record) => renderCellContent(text, record, item.key),
      };
    });
    return arr;
  };

  // const columns = [
  //   {
  //     title: '项目',
  //     dataIndex: item.title,
  //     key: 'name',
  //     width: 400,
  //   },
  //   {
  //     title: (
  //       <a
  //         onClick={record => {
  //           window.open('www.baidu.com');
  //         }}
  //       >
  //         电厂1
  //       </a>
  //     ),
  //     dataIndex: 'power1',
  //     key: 'power1',
  //     width: 100,

  //     render: (text, record) => renderCellContent(text, record, 'power1'),
  //   },
  //   {
  //     title: (
  //       <a
  //         onClick={record => {
  //           window.open('www.baidu.com');
  //         }}
  //       >
  //         电厂2
  //       </a>
  //     ),
  //     key: 'power2',
  //     dataIndex: 'power2',
  //     width: 100,
  //     render: (text, record) => renderCellContent(text, record, 'power2'),
  //   },
  //   {
  //     title: (
  //       <a
  //         onClick={record => {
  //           window.open('www.baidu.com');
  //         }}
  //       >
  //         电厂3
  //       </a>
  //     ),
  //     key: 'power3',
  //     dataIndex: 'power3',
  //     width: 100,
  //     render: (text, record) => renderCellContent(text, record, 'power3'),
  //   },
  // ];

  const data = [
    {
      key: 1,
      name: '生产量',
      power1: null,
      address: null,
      isFather: true,
      children: [
        {
          key: 2,
          name: '垃圾进场总量（万吨）',
          power1: 'power1',
          power2: 'power2',
          power3: 'power3',
          popData: [
            { key: 'power1', name: 1, power1: 1 },
            { key: 'power2', name: 1, power1: 2 },
            { key: 'power3', name: 1, power1: 3 },
          ],
        },
        {
          key: 3,
          name: '餐厨垃圾量（万吨）',
          power1: 'power1',
          power2: 'power2',
          power3: 'power3',
          popData: [
            { key: 'power1', name: 2, power1: 1 },
            { key: 'power2', name: 2, power1: 2 },
            { key: 'power3', name: 2, power1: 3 },
          ],
        },
        {
          key: 4,
          name: '全厂污水总量（万吨）',
          power1: 'power1',
          power2: 'power2',
          power3: 'power3',
          popData: [
            { key: 'power1', name: 3, power1: 1 },
            { key: 'power2', name: 3, power1: 2 },
            { key: 'power3', name: 3, power1: 3 },
          ],
        },
      ],
    },
    {
      key: 5,
      name: '生产成本',
      isFather: true,
      power1: null,
      address: null,
      children: [
        {
          key: 6,
          name: '百大卡煤单价（元/百大卡）',
          power1: 'power1',
          power2: 'power2',
          power3: 'power3',
          popData: [
            { key: 'power1', name: 4, power1: 1 },
            { key: 'power2', name: 4, power1: 2 },
            { key: 'power3', name: 4, power1: 3 },
          ],
        },
        {
          key: 7,
          name: '煤炭热值（大卡）',
          power1: 'power1',
          power2: 'power2',
          power3: 'power3',
          popData: [
            { key: 'power1', name: 5, power1: 1 },
            { key: 'power2', name: 5, power1: 2 },
            { key: 'power3', name: 5, power1: 3 },
          ],
        },
        {
          key: 8,
          name: '供汽(热)量(万吨)',
          power1: 'power1',
          power2: 'power2',
          power3: 'power3',
          popData: [
            { key: 'power1', name: 6, power1: 1 },
            { key: 'power2', name: 6, power1: 2 },
            { key: 'power3', name: 6, power1: 3 },
          ],
        },
      ],
    },
  ];
  return (
    <div style={{ margin: 100 }}>
      <Table columns={getColumns()} dataSource={data} bordered />
    </div>
  );
};
export default App;
